
const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    // 状态管理
    const currentPage = ref('home');

    // 页面导航
    const goHome = () => {
      currentPage.value = 'home';
    };

    const goHealth = () => {
      currentPage.value = 'health';
    };

    const showLocation = () => {
      alert("一键定位功能已启动！您的位置已发送给护理中心，工作人员将在15分钟内到达！");
    };

    const showService = () => {
      alert("服务预约功能已开启，请选择所需服务类型和时间");
    };

    const showEmergency = () => {
      alert("紧急求助已启动！系统已将您的求救信号发送给家人和护理中心！");
    };

    // ========================================================
    // 根据图片信息精准重建的图表数据
    // ========================================================

    // 1. 月度健康数据趋势图（精确数据点位置）
    const trendPoints = ref([
      { x: 50, y: 340, value: 23 },
      { x: 130, y: 355, value: 11 },
      { x: 210, y: 380, value: 1 },
      { x: 290, y: 380, value: 1 },
      { x: 370, y: 340, value: 23 },
      { x: 450, y: 380, value: 1 },
      { x: 530, y: 370, value: 13 },
      { x: 610, y: 380, value: 1 },
      { x: 690, y: 380, value: 1 },
      { x: 770, y: 60, value: 100 },
      { x: 850, y: 200, value: 80 },
      { x: 930, y: 200, value: 80 }
    ]);

    // 计算SVG路径（连续连接所有数据点）
    const trendPath = computed(() => {
      const points = trendPoints.value;
      if (points.length < 2) return '';

      let path = `M ${points[0].x} ${points[0].y} `;
      for (let i = 1; i < points.length; i++) {
        path += `L ${points[i].x} ${points[i].y} `;
      }
      return path;
    });

    // 为每个点添加标签位置
    trendPoints.value.forEach((point, idx) => {
      point.labelStyle = {
        left: `${point.x / 10}%`,
        top: `${(point.y - 40) / 4}%`
      };
    });

    // 2. 血氧饱和度图表（精确数据点位置）
    const oxygenPoints = ref([
      { x: 50, y: 380, value: 20 },
      { x: 250, y: 240, value: 85 },
      { x: 450, y: 160, value: 95 },
      { x: 650, y: 140, value: 97 },
      { x: 850, y: 120, value: 98 }
    ]);

    const oxygenPath = computed(() => {
      const points = oxygenPoints.value;
      if (points.length < 2) return '';

      let path = `M ${points[0].x} ${points[0].y} `;
      for (let i = 1; i < points.length; i++) {
        path += `L ${points[i].x} ${points[i].y} `;
      }
      return path;
    });

    oxygenPoints.value.forEach((point, idx) => {
      point.labelStyle = {
        left: `${point.x / 10}%`,
        top: `${(point.y - 30) / 4}%`
      };
    });

    // 3. 血糖变化图表（精确数据点位置）
    const sugarPoints = ref([
      { x: 80, y: 300, value: 3.0 },
      { x: 220, y: 250, value: 10.0 },
      { x: 360, y: 190, value: 19.6 },
      { x: 500, y: 140, value: 28.0 },
      { x: 640, y: 200, value: 13.1 },
      { x: 780, y: 220, value: 10.6 },
      { x: 920, y: 250, value: 6.8 }
    ]);

    const sugarPath = computed(() => {
      const points = sugarPoints.value;
      if (points.length < 2) return '';

      let path = `M ${points[0].x} ${points[0].y} `;
      for (let i = 1; i < points.length; i++) {
        path += `L ${points[i].x} ${points[i].y} `;
      }
      return path;
    });

    sugarPoints.value.forEach((point, idx) => {
      point.labelStyle = {
        left: `${point.x / 10}%`,
        top: `${(point.y - 30) / 4}%`
      };
    });

    return {
      currentPage,
      goHome,
      goHealth,
      showLocation,
      showService,
      showEmergency,
      trendPoints,
      trendPath,
      oxygenPoints,
      oxygenPath,
      sugarPoints,
      sugarPath
    };
  }
}).mount('#app');
